<script>
import { ArrowDown } from '@element-plus/icons-vue';
import { computed, reactive, toRefs } from 'vue';
import request from '../request';
// import $bus from '../bus';
import { useMainStore } from '../store';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
export default {
	name: 'NavTab',
	components: { ArrowDown },
	setup() {
		const store = useMainStore();
		const data = reactive({
			isCollapse: false,
			userInfo: computed(() => store.userInfo),
			visible: false,
			from: {
				pas: '',
				pasn: '',
				pasns: '',
			},
			rules: {
				pas: [{ required: true, message: '格式错误', trigger: 'blur' }],
				pasn: [{ required: true, message: '格式错误', trigger: 'blur' }],
				pasns: [{ required: true, message: '格式错误', trigger: 'blur' }],
			},
			auther: {
				data: { name: '', imgList: [] },
			},
		});
		const router = useRouter();
		const dropdown = (e) => {
			console.log('e', e);
			if (e == 1) {
				data.visible = true;
				data.from = { pas: '', pasn: '', pasns: '' };
			} else {
				store.$reset();
				router.replace('/login');
			}
		};
		// const collapseBtn = () => {
		// 	data.isCollapse = !data.isCollapse;
		// 	$bus.emit('collapse', data.isCollapse);
		// };
		const ruleFormRef = ref(null);
		const submitBtn = async () => {
			if (data.from.pasn != data.from.pasns) {
				ElMessage.error('两次密码输入的不一致');
				return;
			}
			await ruleFormRef.value.validate((valid) => {
				if (valid) {
					const params = {
						id: store.userInfo._id,
						name: store.userInfo.data.phone,
						fromData: data.from,
						type: 'editPassword',
					};
					request('/getHome', params).then((res) => {
						console.log('res', res);
						if (res.status === 'S') {
							ElMessage.success(res.message);
							data.visible = false;
							router.replace('/login');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};
		const getAuther = () => {
			const params = {
				type: 'getAuther',
				id: store.userInfo._id,
			};
			request('/getHome', params).then((res) => {
				console.log('用户头像', res);
				if (res.status === 'S') {
					data.auther = res.data[0];
				}
			});
		};
		getAuther();
		return {
			...toRefs(data),
			dropdown,
			submitBtn,
			ruleFormRef,
			// collapseBtn,
		};
	},
};
</script>
<template>
	<div class="nav-tab flexr flexcc flex-j-e">
		<!-- <div @click="collapseBtn">
			<template v-if="!isCollapse">
				<el-icon size="20"><Fold /></el-icon>
			</template>
			<template v-else>
				<el-icon size="20"><Expand /></el-icon>
			</template>
		</div> -->

		<div class="flexr flexcc">
			<template v-if="auther.data.imgList.length > 0">
				<img :src="auther.data.imgList[0]" alt="" class="av" />
			</template>
			<template v-else>
				<img src="../assets/image/logo.png" alt="" class="av" />
			</template>

			<span>当前用户：</span>
			<el-dropdown>
				<span class="c18">
					{{ auther.data.name }}
					<el-icon class="el-icon--right" color="#1890ff">
						<arrow-down />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="dropdown(1)">修改密码</el-dropdown-item>
						<el-dropdown-item @click="dropdown(2)">退出系统</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
		<!-- 修改密码弹框 -->
		<el-dialog v-model="visible" title="修改密码" width="40%" :show-close="false">
			<div class="dialog">
				<el-form label-position="right" :rules="rules" label-width="100px" ref="ruleFormRef" :model="from" style="max-width: 460px">
					<el-form-item label="原始密码" prop="pas"
						><el-input show-password type="password" v-model="from.pas" placeholder="请输入原始密码"
					/></el-form-item>
					<el-form-item label="新密码" prop="pasn"
						><el-input show-password type="password" v-model="from.pasn" placeholder="请输入新密码"
					/></el-form-item>
					<el-form-item label="确认密码" prop="pasns"
						><el-input type="password" show-password v-model="from.pasns" placeholder="请再次输入确认密码"
					/></el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="flexr flexcc flexjc">
					<el-button @click="visible = false" size="large">取消</el-button>
					<el-button type="primary" @click="submitBtn" size="large"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style lang="less">
.nav-tab {
	width: 100%;
	height: 100%;
	font-size: 14px;
	.av {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 30px;
	}
	.c18 {
		color: #1890ff;
	}

	.mb-10 {
		margin-bottom: 10px;
	}
	.center {
		text-align: center;
	}
}
</style>
